<template>
    <h2>待审批物资采购</h2>

    <el-form ref="ruleFormRef" style="max-width: 600px" :model="from" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="货物名称" prop="sPCargoName">
            <el-input v-model="from.sPCargoName" />
        </el-form-item>
        <el-form-item label="类型" prop="sPTypeID">
            <el-select v-model="from.sPTypeID" clearable placeholder="Select" style="width: 240px">
                <el-option :value="0" label="请选择" />
                <el-option v-for="item in TypeInfo" :key="item.typeid" :label="item.typeName" :value="item.typeid" />
            </el-select>
        </el-form-item>
        <el-form-item label="材质" prop="sPMateriaLquality">
            <el-select v-model="from.sPTypeID" clearable placeholder="Select" style="width: 240px">
                <<el-option :value="0" label="请选择" />
                <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID"
                    :label="item.materiaLqualityName" :value="item.mmteriaLqualityID" />
            </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="sPGaugeLattice">
            <el-input v-model="from.sPGaugeLattice" />
        </el-form-item>
        <el-form-item label="产地" prop="sPProvinceID">
            <el-select v-model="from.sPNationID" clearable placeholder="Select" style="width: 240px"
                @change="Provincelist()">
                <el-option :value="0" label="请选择国家" />
                <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName"
                    :value="item.nationID" />
            </el-select>
            <el-select v-model="from.sPProvinceID" clearable placeholder="Select" style="width: 240px">
                <el-option :value="0" label="请选择省" />
                <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                    :value="item.provinceID" />
            </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="sPQuantity">
            <el-input-number v-model="from.sPQuantity" :min="1" @change="handleChange" />
        </el-form-item>
        <el-form-item label="期望交付日期" prop="sPExpectedDeliveryDate">
            <el-date-picker v-model="from.sPExpectedDeliveryDate" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="用途描述" prop="sPPurposeDescription">
            <el-input v-model="from.sPPurposeDescription" type="textarea" />
        </el-form-item>
        <el-form-item label="备注" prop="sPReserveNote">
            <el-input v-model="from.sPReserveNote" type="textarea" />
        </el-form-item>
        <el-form-item label="审批备注" prop="remarks">
            <el-input v-model="from.remarks" type="textarea" />
        </el-form-item>
        <el-form-item label="转批人">
            <el-select v-model="ruleForm.superstratumCharge" placeholder="请选择转批人">
                <el-option v-for="item in tableUser" :label="item.name" :value="item.name" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="Pass(xid = 1)">通过并转批</el-button>
            <el-button @click="Pass(xid = 2)">拒绝</el-button>
            <el-button type="primary" @click="Pass(xid = 3)"> 通过并终止转批</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup lang='ts'>

import { reactive, ref, onMounted, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//数据信息
const from = reactive({
    "sPCargoID": 0,
    "sPCargoName": "",
    "sPTypeID": 0,
    "sPMateriaLquality": 0,
    "sPGaugeLattice": "",
    "sPNationID": 0,
    "sPProvinceID": 0,
    "sPQuantity": 0,
    "sPExpectedDeliveryDate": "",
    "sPPurposeDescription": "",
    "sPReserveNote": "",
    "sPApprover": "",
    "sPApprovalStatus": 1,
    updateName: ""
})
let xid = 0;
const ruleForm = reactive({
    "name": route.query.name,
    "remarks": "无",
    "personnelId":  route.query.id,
    "field": 0,
    "tableName": "物资采购"
})

//生命函数钩
onMounted(() => {
    //显示数据详情
    SuppliesPurchasingInfo()
    //显示类  型
    TypeInfolist()
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
    GetUser()
})
//显示类    型
const TypeInfo = ref([])
const TypeInfolist = () => {
    from.sPProvinceID = 0;
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/TypeInfolist").then(res => {
        TypeInfo.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    from.sPProvinceID = 0;
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Public/Provincelist?nationID=" + from.sPNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示数据详情
const SuppliesPurchasingInfo = () => {

    axios.get("http://10.223.8.2:8000/ReadMaterial/api/SuppliesPurchasing/SuppliesPurchasingInfo?sPCargoID=" + route.query.id).then(res => {
        from.sPCargoID = res.data.data.sPCargoID;
        from.sPCargoName = res.data.data.sPCargoName;
        //显示类  型
        TypeInfolist()
        from.sPTypeID = res.data.data.sPTypeID;
        //显示材 质
        MateriaLqualitylist();
        from.sPMateriaLquality = res.data.data.sPMateriaLquality;

        from.sPGaugeLattice = res.data.data.sPGaugeLattice;
        //显示产 地：国家
        Nationlist();

        from.sPNationID = res.data.data.sPNationID;
        //显示产 地：省
        Provincelist()
        from.sPProvinceID = res.data.data.sPProvinceID;
        from.sPQuantity = res.data.data.sPQuantity;
        from.sPExpectedDeliveryDate = res.data.data.sPExpectedDeliveryDate;
        from.sPPurposeDescription = res.data.data.sPPurposeDescription;
        from.sPReserveNote = res.data.data.sPReserveNote;
        from.updateName = res.data.data.updateName;
    }).catch(err => {
        console.log(err)
    })
}


//验证
const rules = reactive<FormRules>({
    sPCargoName: [
        { required: true, message: '货物名称不能为空', trigger: 'blur' },
    ], sPQuantity: [
        { required: true, message: '数量不能为空', trigger: 'blur' },
    ], sPPurposeDescription: [
        { required: true, message: '用途描述不能为空', trigger: 'blur' },
    ],
    sPTypeID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    sPMateriaLquality: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ], sPNationID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
    sPProvinceID: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ], sPExpectedDeliveryDate: [
        {
            required: true,
            message: '请选择',
            trigger: 'change',
        },
    ],
})
//数值
const handleChange = (value: number) => {
    from.sPQuantity = value
    console.log(value)
}
//提交审核
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            from.sPApprovalStatus = 10
            console.log(from)
            axios.post("http://10.223.8.2:8000/Material/api/SuppliesPurchasing/UPdSuppliesPurchasing", from).then(res => {
                if (res.data.code > 0) {
                    ElMessage.success("提交成功")
                    router.push("/PurchasingList")
                } else {
                    ElMessage.error("提交失败")
                }
            }).catch(err => {
                console.log(err)
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//保存草稿
const submitForm1 = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            from.sPApprovalStatus = 1
            console.log(from)
            axios.post("http://10.223.8.2:8000/Material/api/SuppliesPurchasing/UPdSuppliesPurchasing", from).then(res => {
                if (res.data.code > 0) {
                    ElMessage.success("保存成功")
                    router.push("/PurchasingList")
                } else {
                    ElMessage.error("保存失败")
                }
            }).catch(err => {
                console.log(err)
            })

        } else {

        }
    })
}
const tableUser = ref([]);
const GetUser = () => {
    axios({
        method: "get",
        url: "http://47.96.109.219:5202/api/User/UserSelectShow"
    })
        .then(res => {
            tableUser.value = res.data.data
        })
}
const Pass = (id: number) => {
    axios.post("http://10.223.8.2:8000/Material/api/MateralApproval/UpdateCai", {
        name: route.query.name,
        remarks: ruleForm.remarks,
        personnelId: route.query.id,
        field: id,
        tableName: ruleForm.tableName
    })
        .then(res => {
            if (res.data.data > 0) {
                router.push({
                    name: "PurchasingApproval"
                })
            }
            else {

            }
        })
}

</script>

<style></style>